<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路线规划</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
</head>
<body class="bg-gray-100 h-screen flex flex-col">
    <!-- 顶部导航 -->
    <div class="bg-white p-3 shadow flex items-center sticky top-0 z-10">
        <button class="mr-4"><i class="fas fa-arrow-left"></i></button>
        <h1 class="text-lg font-semibold flex-grow text-center">路线规划</h1>
        <button class="ml-4 opacity-0"><i class="fas fa-arrow-left"></i></button>
    </div>

    <!-- 起点终点选择 -->
    <div class="p-4 bg-white shadow-md mb-4">
        <div class="relative mb-3">
            <i class="fas fa-map-marker-alt absolute left-3 top-1/2 transform -translate-y-1/2 text-green-500"></i>
            <input type="text" placeholder="输入起点或选择地图上的点" value="当前位置" class="w-full pl-10 pr-3 py-2 border rounded focus:outline-none">
        </div>
        <div class="relative">
             <i class="fas fa-flag-checkered absolute left-3 top-1/2 transform -translate-y-1/2 text-red-500"></i>
            <input type="text" placeholder="输入终点或选择地图上的点" value="知名景点A" class="w-full pl-10 pr-3 py-2 border rounded focus:outline-none">
        </div>
        <button class="w-full mt-3 bg-blue-500 text-white py-2 rounded font-semibold hover:bg-blue-600">
            规划路线
        </button>
    </div>

    <!-- 推荐路线展示区 -->
    <div class="flex-grow p-4 overflow-y-auto">
        <h2 class="text-md font-semibold mb-3">推荐路线 (步行)</h2>
        <div class="bg-white p-4 rounded-lg shadow">
            <div class="flex justify-between items-center mb-2">
                <span class="font-medium text-blue-600">路线 1: 最佳路线</span>
                <span class="text-sm text-gray-500"><i class="fas fa-clock mr-1"></i> 约 15 分钟</span>
            </div>
            <p class="text-sm text-gray-600 mb-3">途径：游客中心 -> 景点C -> 知名景点A</p>
            <div class="border-t pt-2 text-right">
                <button class="text-blue-500 text-sm font-medium">查看地图</button>
            </div>
        </div>

        <div class="bg-white p-4 rounded-lg shadow mt-3">
            <div class="flex justify-between items-center mb-2">
                <span class="font-medium text-gray-700">路线 2: 少爬坡</span>
                 <span class="text-sm text-gray-500"><i class="fas fa-clock mr-1"></i> 约 20 分钟</span>
            </div>
             <p class="text-sm text-gray-600 mb-3">途径：东门 -> 景点D -> 知名景点A</p>
             <div class="border-t pt-2 text-right">
                <button class="text-blue-500 text-sm font-medium">查看地图</button>
            </div>
        </div>
         <!-- 更多路线... -->
    </div>

</body>
</html>